<!-- 文章标签 -->
<template>
    <div class="container">
        <!-- 标签 -->
        <articleTitleCard :title="'文章标签'" class="title-card">
            <ul class="tag">
                <li 
                class="tag-name"
                :class="activeId == item.id?'active-animation':''"
                v-for="item in tagList" 
                :key="item.id"
                @click="setActiveTag(item.id)">{{ item.tagName }}</li>
            </ul>
        </articleTitleCard>
        <!-- 文章 -->
        <el-row class="main">
            <el-col
            :sm="24" :md="8" :lg="6"
            v-for="articleItem in articles"
            :key="articleItem.id"
            class="main-card">
                <ArticleCard :cardInfo="articleItem" :isGoTagPage="false"></ArticleCard>
            </el-col>
        </el-row>
        <!-- 分页 -->
        <Pagination
        :currentPage="offset" 
        :pageSize="limit"
        :count="count"
        :isShow="isShow"
        @currentChange="currentChange"></Pagination>
        <!-- 评论留言 -->
        <Comment 
        :commentTitle="'留言'" 
        :commentType="COMMENTS_TYPE.TAGS.value"
        @commentSubmit="getCommentList">
        </Comment>
        <!-- 评论列表 -->
        <CommentList
        :commentList="messageList"
        :commentType="COMMENTS_TYPE.TAGS.value"
        :isShow="commentisShow"
        @commentSubmit="getCommentList"></CommentList>
    </div>
</template>

<script setup>
import { tagsApi } from '@/api/article/tags-api';
import { articleApi } from '@/api/article/article-api';
import ArticleCard from '../components/article-card/article-card.vue';
import articleTitleCard from '@/components/article/article-title-card/article-title-card.vue';
import { ARTICLE_STATUS } from '@/constants/system/article';
import Pagination from '@/components/system/pagination/pagination.vue';
import { useRoute } from 'vue-router';

import { COMMENTS_TYPE } from '@/constants/system/user-const';
import { commentApi } from '@/api/article/comment-api';

// ========================= 实列挂载之前调用 =========================
onBeforeMount(() => {
    getTagList();
    getCommentList();
    // getArticles();
    // setActiveTag();
});

// ========================= 获取标签数据 =========================
const route = useRoute();
const tagList = ref([]);
async function getTagList() {
    try {
        let params = {
            state: true
        };
        const res = await tagsApi.list(params);
        if(res.meta.status !== 200) throw new Error(res.meta.msg);
        tagList.value = res.data.data;
        route.query.id ? setActiveTag(route.query.id) : 
        setActiveTag(res.data.data[0].id);
    } catch (e) {
        console.error(e)
    };
};

// ========================= 获取文章数据 =========================
let articles = ref([]);
let limit = ref(10);
let offset = ref(1);
let count = ref(0);
let isShow = ref(false);
async function getArticles() {
    if(route.query.id) return;
    let conditions = {
        params: {
            status: ARTICLE_STATUS.RELEASE_STATE.value,
            articleTitle:'',
        },
        limit: limit.value,
        offset: offset.value
    }
    const res = await articleApi.list(conditions);
    let data = res.data.data
    articles.value = data;
    isShow.value = !!data.length;
    count.value = res.data.count;
};

// ========================= 选中或跳转进来 =========================
let activeId = ref('');
async function setActiveTag(id) {
    if(activeId.value == id) return;
    isShow.value = true;
    activeId.value = id;
    let conditions = {
        params: {
            id: id,
        },
    };
    const res = await tagsApi.findOne(conditions);
    articles.value = res.data.articles;
};

// ========================= 获取评论列表 =========================
const messageList = ref([]);
let commentisShow = ref(false);
async function getCommentList() {
    let conditions = {
        params: {
            type: COMMENTS_TYPE.TAGS.value
        },
        order: [['createdAt', 'asc']]
    };
    const res = await commentApi.list(conditions);
    messageList.value = res.data.data;
    commentisShow = !!res.data.data.length;
};

// ========================= 分页 =========================
// 分页
function currentChange(value) {
    offset.value = value;
    getArticles();
};
</script>

<style scoped lang="scss">
    @import '@/theme/public.scss';
    @import '@/theme/animations.scss';
    @import './article-tag.scss';
</style>